<template>
  <el-card class="page-tools">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col>
        <!-- 有名字的叫具名插槽 没名字的叫匿名插槽 -->
        <!-- v-if搭配属性使用进行dom显示隐藏的控制 ---易用性 -->
        <!-- <span v-if="title" class="before">
          {{ title }}
        </span> -->
        <slot name="before" />
      </el-col>
      <el-col>
        <el-row type="flex" justify="end">
          <!-- <slot name="default" /> 相当于没起名字 -->
          <slot name="after" />
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
// 封装组件的思想：(为什么要封装组件？要封装一个什么样的组件？)
// 1.关注相同点 关注不同点
// 2.看看不同点是 数据不一样(props) 还是 dom解构不一样(插槽)
// 3.如果是dom解构，可以提前在组件内部写好样式，只需要传递

export default {
}
</script>

<style lang='scss'>
 .page-tools {
    margin: 10px 0;
    .before {
      line-height: 34px;
    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
  }
 }
</style>
